<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<form action="">
				<input type="text" placeholder="用户名" @keyup.delete="clearContent" v-model="uname" /><br>
				<!-- @keyup.enter按回车键,松开,触发handleSubmit -->
				<input type="password" placeholder="密码" @keyup.enter="handleSubmit" v-model="pwd"><br>
				<input type="button" @click="handleSubmit" value="提交">			
				</form>
			<input type="text" @keyup.65="btnHandle">
		</div>
		<script>
			// 可以使用 `v-on:keyup.f1`
			Vue.config.keyCodes.f1 = 112;
			
			let vm=new Vue({
				el:'#app',
				data:{
					uname:'',
					pwd:''
				},
				methods:{
					handleSubmit(){
						//获得用户数据,通过ajax和服务端进行交互
						console.log(this.uname,this.pwd);
					},
					btnHandle(event){
						console.log(event.keyCode);
					},
					clearContent(){
						this.uname='';
					}
				}
			});
		</script>
	</body>
</html>
